// 二级标题
import "./index.scss";
import { useRef } from "react";

/**
 *
 * @param title 标题内容
 * @param type 类型 h3 或者 h4
 * @constructor
 */
const SubTitle = ({ title, type = 3 }: { title: string; type?: 3 | 4 }) => {
  const targetRef = useRef(null);
  const toTop = () => {
    if (targetRef.current) {
      const element: any = targetRef.current;
      const offsetTop = element.offsetTop;

      const parent = document.getElementById("content-parent") as HTMLElement;
      parent.scrollTo({
        top: offsetTop,
        behavior: "smooth",
      });
    }
  };
  return (
    <>
      {type == 3 ? (
        <h2 onClick={() => toTop()} ref={targetRef} className="sub-title">
          H2 {title}
        </h2>
      ) : (
        <h4 onClick={() => toTop()} ref={targetRef} className="sub-title">
          H3 {title}
        </h4>
      )}
    </>
  );
};

export default SubTitle;
